<!-- 首页 -->
<template>
  <div class="home-container">
    <ul
      class="el-row--flex justify-content-center align-items-center home-data-aggregation-container"
    >
      <li
        v-for="(item, idx) in userCountObj"
        :key="idx"
        class="flex-num el-row--flex align-items-center data-aggregation-item"
      >
        <div class="flex-num">
          <div class="text-type">{{ item.label }}</div>
          <div class="text-num">{{ homeAllCount[item.key] }}</div>
        </div>
        <div class="flex-none data-aggregation-item-icon">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="item.icon"></use>
          </svg>
        </div>
      </li>
    </ul>
    <div class="home-module-box home-personnal-box">
      <div
        class="personnal-mode-box"
        v-for="item in todoEleArr"
        :key="item.key"
      >
        <div class="mode-tran-box">
          <div class="items-box">
            <div class="home-modu-title-box">
              <span class="title-txt">{{ item.title }}</span>
              <router-link class="title-more" :to="item.to"
                >({{ todoNumObj[item.key] }})</router-link
              >
            </div>
            <div class="tice-item-more-box">
              <router-link
                class="item-box"
                v-for="(child, index) in todoListObj[item.listKey]"
                :to="child.link"
                :key="index"
              >
                <span class="item-txt item-name" :title="child.leftStr"
                  >{{ child.leftStr | STR_SUB_LEAVE_OUT(7, 4, "...") }}
                </span>
                <span class="item-txt item-job">{{ child.centerStr }}</span>
                <span class="item-date">{{ child.rightStr }}</span>
              </router-link>
            </div>
          </div>
          <div class="pup-box">
            <div class="pup-left">
              <span class="left-num">
                {{ todoNumObj[item.key] }}
              </span>
              <span class="left-txt">{{ item.label }}</span>
            </div>
            <div class="pup-right">
              <svg class="icon icon-box" aria-hidden="true">
                <use :xlink:href="item.icon"></use>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul class="el-row--flex home-notice">
      <li class="flex-num home-notice-left">
        <div class="el-row--flex justify-content-between home-notice-title">
          <span>公告通知</span>
          <span class="home-notice-more-text" @click="onMoreNotice(0)"
            >查看更多</span
          >
        </div>
        <div
          v-for="(newN, index) in getAnnouncementListN"
          :key="index"
          class="el-row--flex justify-content-between notice-c"
          @click="onNoticeDetail(newN.id)"
        >
          <span class="leftN">{{ newN.title }}</span>
          <span class="rightN">{{ newN.release_date }}</span>
        </div>
      </li>
      <li class="flex-num home-notice-right">
        <div class="el-row--flex justify-content-between home-notice-title">
          <span>历史通告</span>
          <span class="home-notice-more-text" @click="onMoreNotice(1)"
            >查看更多</span
          >
        </div>
        <div
          v-for="(historyN, index) in getAnnouncementListO"
          :key="index"
          class="el-row--flex justify-content-between notice-c"
          @click="onNoticeDetail(historyN.id)"
        >
          <span class="leftN">{{ historyN.title }}</span>
          <span class="rightN">{{ historyN.release_date }}</span>
        </div>
      </li>
    </ul>
    <HPDialog
      title="公告详情"
      :visible.sync="outerVisible"
      :footer="false"
      :before-close="() => (outerVisible = !outerVisible)"
    >
      <template v-slot:body>
        <div class="home-notice-body">
          <h3 class="home-notice-body-title">{{ noticeDetails.title }}</h3>
          <p class="home-notice-body-date">
            发布人 :
            {{ noticeDetails.createrName
            }}<span>发布时间 : {{ noticeDetails.releaseDate }}</span>
          </p>
          <p class="home-notice-body-text" v-html="noticeDetails.content"></p>
        </div>
      </template>
    </HPDialog>
    <HPDialog
      title="更多公告"
      class="home-all-notice-dialog"
      :visible.sync="outerVisibleMore"
      :footer="false"
      :before-close="() => (outerVisibleMore = !outerVisibleMore)"
    >
      <template v-slot:body>
        <div v-if="!noticeAll.length" :class="'home-notice-not-data'"></div>
        <ul>
          <li
            v-for="(historyN, index) in noticeAll"
            :key="index"
            :class="' el-row--flex justify-content-between notice-c'"
            @click="onNoticeDetail(historyN.id)"
          >
            <span class="leftN">{{ historyN.title }}</span>
            <span class="rightN">{{ historyN.releaseDate }}</span>
          </li>
        </ul>
      </template>
    </HPDialog>
  </div>
</template>
<script>
import HPDialog from "@/components/HPDialog";
import "@/assets/fonts/iconfont.js";
function fetchHomeLists(store) {
  return store.dispatch("FETCH_HOME_LISTS");
}
// * 更多公告
function fetchNoticeLists(store, opts) {
  return store.dispatch("FETCH_NOTICE_LISTS", opts);
}
// * 公告详情
function fetchNoticeDetil(store, opts) {
  return store.dispatch("FETCH_NOTICE_DETAIL", opts);
}
export default {
  components: {
    HPDialog,
  },
  data() {
    return {
      userCountObj: {
        // * 统计元素对象
        needsCount: {
          key: "needsReceiveCount",
          label: "需求接收",
          classNameIdx: 0,
          icon: "#icon-xuqiufabuxin",
        },
        cvdbCount: {
          key: "cvdbCount",
          label: "简历库",
          classNameIdx: 3,
          icon: "#icon-jianlikuxin",
        },
        admitApplyCount: {
          key: "admitApplyCount",
          label: "入场申请",
          classNameIdx: 2,
          icon: "#icon-gongshishenhexin",
        },
        outsourcerCount: {
          key: "outsourcerCount",
          label: "外包人员",
          classNameIdx: 2,
          icon: "#icon-waibaorenyuanxin",
        },
      },
      homeAllCount: {
        // * 统计值
        needsReceiveCount: 0,
        cvdbCount: 0,
        admitApplyCount: 0,
        outsourcerCount: 0,
      },
      todoEleArr: [
        {
          title: "待接收外包需求",
          to: { path: "/getdemand", query: { stus: "0" } },
          key: "notReceiveNeedsCount",
          listKey: "notReceiveNeedsInfo",
          label: "待接收的需求",
          icon: "#icon-daijieshoudexuqiu",
        },
        {
          title: "待安排的面试",
          to: { path: "/arrange", query: { stus: "1" } },
          key: "interviewTailCount",
          listKey: "notInterviewArranges",
          label: "待安排的面试",
          icon: "#icon-a-jianli1",
        },
        {
          title: "待确认的订单",
          to: { path: "/quoted", query: { stus: "0" } },
          key: "notOfferApplyForCount",
          listKey: "notOfferApplyFors",
          label: "待确认的订单",
          icon: "#icon-baojia",
        },
        {
          title: "待申请的入场",
          to: { path: "/entrance", query: { stus: "0" } },
          key: "beExpirePersonnelCount",
          listKey: "notAdmintApplyFors",
          label: "待申请的入场",
          icon: "#icon-ruchang",
        },
      ],
      todoNumObj: {
        notReceiveNeedsCount: 0, // 待接收的外包需求数
        notOfferApplyForCount: 0, // 待申请的报价
        interviewTailCount: 0, // 待安排的面试人数
        beExpirePersonnelCount: 0, // 待申请入场人数
      },
      todoListObj: {
        notReceiveNeedsInfo: [],
        notInterviewArranges: [],
        notOfferApplyFors: [],
        notAdmintApplyFors: [],
      },
      getAnnouncementListN: [], // * 公告通知数据
      getAnnouncementListO: [], // * 历史公告数据
      outerVisible: false, // * 公告详情弹窗开关
      outerVisibleMore: false, // * 更多公告弹窗开关
      noticeDetails: {}, // 公告详情
      noticeAll: [], // * 更多公告
    };
  },
  created() {
    this.fetchHomeData();
  },
  methods: {
    // * 获取首页数据
    async fetchHomeData() {
      await fetchHomeLists(this.$store);
      let { state, data } = this.$store.getters.getHomeLists;
      if (state === "0000") {
        const {
          noticeInfo,
          notReceiveNeeds,
          notOfferApplyFor,
          notInterviewArrange,
          notAdmintApplyFor,
          homeAllCount,
        } = data;

        this.homeAllCount = {
          needsReceiveCount: Number(homeAllCount.needsReceiveCount) || 0, // 需求接收总数
          cvdbCount: Number(homeAllCount.cvdbCount) || 0, // 简历库总数
          admitApplyCount: Number(homeAllCount.admitApplyCount) || 0, // 入场申请总数
          outsourcerCount: Number(homeAllCount.outsourcerCount) || 0, // 人员信息总数
        };
        this.todoNumObj = {
          notReceiveNeedsCount: Number(homeAllCount.notReceiveNeedsCount) || 0, // 待接收的外包需求数
          notOfferApplyForCount:
            Number(homeAllCount.notOfferApplyForCount) || 0, // 待申请的报价
          interviewTailCount:
            Number(homeAllCount.notInterviewArrangeCount) || 0, // 待安排的面试人数
          beExpirePersonnelCount:
            Number(homeAllCount.notAdmintApplyForCount) || 0, // 待申请入场人数
        };
        // 待接收需求
        if (notReceiveNeeds) {
          this.todoListObj.notReceiveNeedsInfo = this.formatListKey(
            notReceiveNeeds,
            "positionName",
            "needsNumber",
            "uploadTime",
            (item) => {
              return `/getdemand/detail/${item.id}?stus=0`;
            }
          );
        }
        // 待申请的报价
        if (notOfferApplyFor) {
          this.todoListObj.notOfferApplyFors = this.formatListKey(
            notOfferApplyFor,
            "surname",
            "tempPostCode",
            "post_code",
            (item) => {
              return `/quoted/detail/${item.needsCvId}?stus=-1&ofer=${item.offerId}`;
            }
          );
        }
        // 待安排的面试
        if (notInterviewArrange) {
          this.todoListObj.notInterviewArranges = this.formatListKey(
            notInterviewArrange,
            "surname",
            "post_code",
            "update_date",
            (item) => {
              return `/arrange/detail/${item.needsCvId}?stus=1`;
            }
          );
        }
        // 待申请的入场
        if (notAdmintApplyFor) {
          this.todoListObj.notAdmintApplyFors = this.formatListKey(
            notAdmintApplyFor,
            "userName",
            "postCode",
            "createDateForHomePage",
            (item) => {
              return `/entrance/apply?offerId=${item.id}&userName=${item.userName}&needsCvId=${item.needsCvId}&approvalState=${item.approvalState}&needId=${item.needId}`;
            }
          );
        }
        // 公告
        if (noticeInfo) {
          this.getAnnouncementListN = noticeInfo.newNotice;
          this.getAnnouncementListO = noticeInfo.oldNotice;
        }
      }
    },
    // * 获取公告详情
    async getNoticeDetail(id) {
      await fetchNoticeDetil(this.$store, { id: id });
      const { state, data } = this.$store.getters.getNoticeDetailInfo;
      if (state === "0000" && data) {
        this.noticeDetails = data;
      }
    },
    // * 获取更多通告数据
    async getAllNoticeData(type) {
      await fetchNoticeLists(this.$store, { type });
      const { state, data } = this.$store.getters.getNoticeLists;
      if (state === "0000" && data) {
        this.noticeAll = data;
      }
    },
    // * 格式化list字段
    formatListKey(arr, key1, key2, key3, fn) {
      if (!arr.length) {
        return [];
      }
      return arr.slice(0, 3).reduce((prev, item) => {
        prev.push({
          ...item,
          leftStr: item[key1],
          centerStr: item[key2],
          rightStr: item[key3],
          link: fn(item),
        });
        return prev;
      }, []);
    },
    // * 格式化公告列表数据
    desc_noticeData(tempData) {
      let tempObj = {};
      let datas = [];
      for (let i = 0; i < tempData.length; i++) {
        if (i < 6) {
          tempObj = {
            tip: tempData[i].title, // 标题
            id: tempData[i].id, // id
            dateTime: tempData[i].release_date, // 发布时间
            public_scope: tempData[i].public_scope, // 公开范围
          };
          datas.push(tempObj);
        }
      }
      return datas;
    },
    // * 点击更多公告
    onMoreNotice(type) {
      this.getAllNoticeData(type);
      this.outerVisibleMore = true;
    },
    // * 点击公告
    onNoticeDetail(id) {
      this.getNoticeDetail(id);
      this.outerVisible = true;
    },
  },
};
</script>
<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
@mixin noticeItem() {
  .notice-c {
    padding: 6px 0;
    font-size: 12px;
    cursor: pointer;
    &:hover {
      .leftN {
        color: $main-color-sub;
      }
    }
  }
  .leftN {
    font-size: 14px;
    color: $main-font-color;
  }
  .rightN {
    color: #5e5e5e;
  }
}

.home-data-aggregation-container {
  width: 100%;
  margin-bottom: 20px;
  .data-aggregation-item {
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 6px;
    &-icon svg {
      width: 68px;
      height: 68px;
    }
    & > div {
      text-align: left;
    }
  }
  .data-aggregation-item:not(:last-child) {
    margin-right: 16px;
  }
  .data-aggregation-item .iconfont {
    font-size: 46px;
  }
  .text-type {
    font-size: 14px;
    line-height: 22px;
    color: #535353;
  }
  .text-num {
    font-size: 28px;
    line-height: 36px;
    font-weight: 400;
    color: $main-font-color;
    margin-top: 8px;
  }
}
.home-personnal-box {
  height: 180px;
  padding: 20px;
  background-color: #fff;
  .personnal-mode-box {
    .home-modu-title-box {
      border-bottom: none;
    }
    .pup-box {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 9;
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      height: 100%;
      background-color: #f9fbfd;
    }

    .pup-left {
      width: 55%;
      float: left;
      margin-top: 30px;
      span {
        display: inline-block;
        width: 100%;
        text-align: left;
        text-indent: 20px;
      }
      .left-num {
        height: 40px;
        line-height: 40px;
        color: #636363;
        font-weight: bold;
        font-size: 26px;
      }
      .left-txt {
        font-size: 14px;
        color: #7d7d7e;
        height: 30px;
        line-height: 30px;
      }
    }
    .pup-right {
      width: 40%;
      margin-top: 30px;
      float: left;
      .icon-box {
        width: 70px;
        height: 70px;
        display: inline-block;
        border-radius: 4px;
        background-color: #879ccd;
        line-height: 70px;
      }
      .interview-icon-box {
        background-color: #e98b6e;
      }
      .quote-icon-box {
        background-color: #69d2c5;
      }
      .interview-icon-box {
        background-color: #a287c2;
      }
      .right-icon {
        font-size: 50px;
        color: #fff;
      }
    }
  }
  .item-box {
    width: 100%;
    display: inline-block;

    &:hover {
      .item-tip,
      .item-txt,
      .item-name,
      .item-job {
        color: $main-color;
      }
      .item-date {
        color: #b0b0b0;
      }
    }
  }

  .item-tip,
  .item-txt,
  .item-name,
  .item-job {
    float: left;
    color: #3a3a3a;
    text-align: left;
    cursor: pointer;
  }
  .item-job {
    text-align: center;
  }

  .item-date {
    float: right;
    color: #b0b0b0;
  }

  .tice-item-more-box {
    width: 100%;
    height: 135px;
    overflow: hidden;
    background-color: #f9fbfd;
    span {
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      float: left;
    }
    .item-txt {
      width: 32%;
    }
    .item-name {
      text-indent: 12px;
      text-align: left;
    }
    .item-date {
      text-align: right;
      padding-right: 1%;
      float: right;
    }
  }
}
.home-personnal-box {
  .mode-tran-box {
    display: block;
    width: 100%;
    float: left;
    height: 180px;
    overflow: hidden;
    padding: 0;
    border: 0;
    position: relative;
    box-sizing: border-box;
    -webkit-perspective: 1700px;
    -moz-perspective: 1700px;
    perspective: 1700px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    &:hover {
      .pup-box {
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
      }
      .items-box {
        opacity: 1;
        -webkit-transform: rotateX(0);
        -moz-transform: rotateX(0);
        transform: rotateX(0);
      }
    }
  }
  .personnal-mode-box {
    width: 24.2%;
    height: 100%;
    padding: 0;
    margin-right: 1%;
    float: left;
    position: relative;
    z-index: 5;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    .items-box {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      color: #fff;
      height: 100%;
      width: 100%;
      margin: 0;
      opacity: 0;
      text-align: center;
      backface-visibility: hidden;
      -webkit-transform: rotateX(-180deg);
      -moz-transform: rotateX(-180deg);
      transform: rotateX(-180deg);
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      transition: all 0.25s ease-in-out;
    }
    .pup-box {
      backface-visibility: hidden;
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      transition: all 0.25s ease-in-out;
    }
  }
  .personnal-mode-box:last-child {
    margin-right: 0px;
  }
}
.home-modu-title-box {
  height: 46px;
  line-height: 46px;
  border-bottom: 1px solid #f0f2f5;
  span {
    font-size: 12px;
    font-weight: bold;
  }
  .title-txt {
    color: #3a3a3a;
    float: left;
  }
  .title-more {
    float: right;
    color: $main-color;
    cursor: pointer;
    &:hover {
      color: $main-hover-color;
    }
  }
}

.home-notice {
  margin-top: 20px;
  &-left,
  &-right {
    min-height: 280px;
    padding: 20px;
    background-color: #fff;
  }
  &-left {
    margin-right: 20px;
  }
  &-title {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
  }
  &-title > span:first-child {
    position: relative;
    text-indent: 8px;
  }
  &-title > span:first-child::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -6px;
    width: 3px;
    height: 12px;
    background-color: $--color-primary;
  }
  .home-notice-more-text {
    font-size: 12px;
    line-height: 24px;
    color: $main-color-sub;
    cursor: pointer;
  }
  @include noticeItem;
}
.home-notice-not-data {
  margin-top: 80px;
  color: #b0b0b0;
  text-align: center;
}
.home-notice-item {
  cursor: pointer;
  &:hover {
    .home-notice-item-title {
      color: #00a1d6;
    }
  }
  &-title {
    font-size: 14px;
  }
  &-date {
    float: right;
  }
}
.home-notice-body {
  text-align: center;
  .home-notice-body-title {
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 10px;
  }
  .home-notice-body-text {
    font-size: 14px;
    text-align: left;
    margin-top: 10px;
  }
  .home-notice-body-date {
    color: #b0b0b0;
  }
  .home-notice-body-date span {
    margin: 0 10px;
  }
}
.home-all-notice-dialog {
  .el-dialog__body {
    height: 200px;
    overflow-y: auto;
  }
  @include noticeItem;
}
</style>
